<template>
    <!-- 功能 -->
    <button 
        class="el-button"
        :autofocus="autofocus"
        :disabled="disabled || loading"
        :type="nativeType"
        :class="[
            type?'el-button--'+type:'',
            {
                'is-disabled':disabled,
                'is-loading':loading,
                'is-plain':plain,
                'is-round':round,
                'is-circle':circle 
            }
        ]"
        @click="handleClick">
        <i class="el-icon-loading" v-if="loading"></i>
        <i :class="icon" v-if="icon && !loading"></i>
      <span v-if="$slots.default"><slot></slot></span>
    </button>
</template>
<script>
export default {
    props:{
        autofocus:Boolean,
        loading:Boolean,
        nativeType:{
            type:String,
            default:'button'
        },
        disabled:Boolean,
        type:{
            type:String,
            default:'default'
        },
        icon:{
            type:String
        },
        plain:Boolean,
        circle:Boolean,
        round:Boolean
    },
    methods: {
        handleClick(e){
            // vue react 子组件调用父组件函数
            this.$emit('click',e)
        }
    },
}
</script>